<template>
  <div class="user-center">
    <div class="back-button">
      <button @click="goHome">&larr; 返回</button>
    </div>
    <el-container>
      <!-- 左侧导航栏 -->
      <el-aside width="220px" class="sidebar">
        <el-menu
          :default-active="activeMenu"
          router
          class="custom-menu"
        >
          <el-menu-item index="custom" :route="{ path: '/usercenter/custom' }">
            <el-icon><i class="el-icon-user"></i></el-icon>
            <span>用户信息</span>
          </el-menu-item>
          <el-menu-item index="detail" :route="{ path: '/usercenter/detail' }">
            <el-icon><i class="el-icon-document"></i></el-icon>
            <span>实名认证</span>
          </el-menu-item>
          <!-- 订单管理菜单项 -->
          <el-menu-item index="orders" :route="{ path: '/usercenter/orders' }">
            <el-icon><i class="el-icon-s-order"></i></el-icon>
            <span>订单管理</span>
          </el-menu-item>
          <!-- 仅未认证时显示实名认证菜单 -->
          <el-menu-item
            index="auth"
            v-if="!isAuthenticated"
            :route="{ path: '/usercenter/auth' }"
          >
            <el-icon><i class="el-icon-document-checked"></i></el-icon>
            <span>实名认证</span>
          </el-menu-item>
          <el-menu-item index="logout" @click="handleLogout">
            <el-icon><i class="el-icon-switch-button"></i></el-icon>
            <span>退出登录</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const router = useRouter()
const route = useRoute()

// 动态计算激活菜单
const activeMenu = computed(() => {
  const pathSegments = route.path.split('/')
  return pathSegments[pathSegments.length - 1] || 'detail'
})

// 认证状态
const isAuthenticated = ref(false)

// 获取认证状态
const fetchAuthStatus = async () => {
  try {
    const phone = localStorage.getItem('phone');
    if (!phone) return;
    
    // 1. 获取用户ID
    const userDetailRes = await axios.get('http://127.0.0.1:8000/login/detail/', { params: { phone } });
    if (!userDetailRes.data.data || !userDetailRes.data.data.id) {
      return;
    }
    const userId = userDetailRes.data.data.id;

    // 2. 查询认证状态
    const authRes = await axios.get('http://127.0.0.1:8000/login/getuserauth/', {
      params: { user_id: userId }
    });
    
    isAuthenticated.value = authRes.data.data && authRes.data.data.name;
  } catch (error) {
    console.error('获取认证状态失败:', error);
    ElMessage.error('获取认证状态失败，请稍后重试');
  }
};

// 处理退出登录
const handleLogout = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('retoken');
  localStorage.removeItem('phone');
  localStorage.removeItem('user_id'); // 新增
  localStorage.removeItem('userid'); // 新增
  ElMessage.success('已退出登录');
  router.push('/login');
};

// 返回首页
const goHome = () => {
  router.push('/');
};

onMounted(() => {
  fetchAuthStatus();
});
</script>

<style scoped>
.user-center {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.sidebar {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  height: 100%;
}

.main-content {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 120px);
  flex-grow: 1;
}

.back-button {
  margin-bottom: 20px;
  padding: 0 20px;
}

.back-button button {
  background: #4e73df;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

.back-button button:hover {
  background: #2e59d9;
}

/* 自定义菜单样式 */
.custom-menu {
  border-right: none;
}

.custom-menu .el-menu-item {
  height: 60px;
  line-height: 60px;
  margin: 8px 10px;
  border-radius: 6px;
  transition: all 0.3s;
}

.custom-menu .el-menu-item:hover {
  background-color: #f0f7ff;
}

.custom-menu .el-menu-item.is-active {
  background-color: #4e73df;
  color: white;
}

.custom-menu .el-menu-item.is-active .el-icon {
  color: white;
}

.custom-menu .el-menu-item.is-active:hover {
  background-color: #3a5bc7;
}
</style>